<script setup>
import { ref } from 'vue'
import { useUser } from '@/composition/useUser'
import { useToast } from '@/composition/useToast'
import { generateUUID, go2Link, go2Router, copyJSON, getDeviceType, bgColors, isPhone, uploadFile, isNotEmpty, isEmpty, saveUser2Db } from '@/plugins/util.js'


const { loginModel, user, login, loggedIn, logout, regist, sendRegistVerifyCode } = useUser();

const { successToast, errorToast } = useToast();

// 引入vue-json-editor模块
import "jsoneditor";
import vueJsonEditor from 'vue-json-editor'

let jsonContent = ref()  // json数据
const hasJsonFlag = ref(true)  // json是否验证通过

const jsonChange = (value) => {
    console.log(value)
    // 实时保存
    jsonSave(value)
}
// 保存
const jsonSave = (value) => {
    jsonContent.value = value
    hasJsonFlag.value = true
}
// 出错
const hasError = (value) => {
    console.log("出现错误")
    hasJsonFlag.value = false
}
// 检查json
const checkJson = () => {
    if (hasJsonFlag.value === false) {
        console.log("json校验失败")
        return false
    } else {
        console.log("json校验成功")
        return true
    }
}


</script>


<template>
    <div class="h-container">
        <div class="m-5">
            <header class="border-l-8 border-green-500 py-3 pl-4 bg-green-200 rounded italic tracking-widest">
                <span class="text-indigo-500 cursor-pointer" @click="go2Router('home')">主页</span>
                <span class="mx-2">/</span>
                <span>用户信息</span>
            </header>

            <section class="mt-4">
                <vue-json-editor v-model="jsonContent" :show-btns="true" mode="tree" lang="zh" :expandedOnStart="false"
                    @json-change="jsonChange" @json-save="jsonSave" @has-error="hasError" />
            </section>
        </div>
    </div>
</template>


<style scoped></style>
